<!-- 首页 -->
<template>
	<view class="bgAll">
		<view class="bg">
			<image src="../../static/image/bg1.jpg" mode="aspectFill"></image>
		</view>
		<view class="backimg">
			<view class="welcome"><image src="../../static/image/logo.png" mode="heightFix"></image>防伪查询</view>
			<view class="Anti-counterfeiting">
				<view class="input-title">刮开标签上的防伪图层，输入防伪码</view>
				<view class="input-box">
					<input type="text" value="" placeholder="请输入防伪码或扫描二维码" @input="getcode" />
					<!--<view class="image-box" @click="scancode">
						<image class="scan" src="../../static/image/scan.png" mode=""></image>
					</view>-->
				</view>
				<view class="verification-box" @click="gotoresult">查询</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: "",
				platform: "miniapp",
				scannone: true
			}
		},
		onShow() {
			// #ifdef H5
			this.scannone = false;
			// #endif

		},
		methods: {
			getcode(e) {
				this.code = e.detail.value;
			},
			//下拉加载
			// onPullDownRefresh() {
			// 	setTimeout(function() {
			// 		uni.stopPullDownRefresh();
			// 	}, 1000);
			// },
			gotoresult() {
				if (this.code != "") {
					uni.navigateTo({
						url: "./result?code=" + this.code
					})
				} else {
					this.$refs.uToast.show({
						title: "请输入要查询的防伪码",
						type: 'error',
						icon: false
					})
				}
			},
			// gotoscaning() {
			// 	if(uni.getStorageSync("token") == "") {
			// 		uni.navigateTo({
			// 			url:"../login/login"
			// 		})
			// 	} else {
			// 		uni.navigateTo({
			// 			url: "./scaning"
			// 		})
			// 	}
			// },
			scancode() {
				uni.scanCode({
					success: function(res) {
						if (res.result != "") {
							var paraString = res.result;
							var paras = paraString.split("=");
							uni.navigateTo({
								url: "./result?code=" + paras[1]
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Anti-counterfeiting{ position: absolute; bottom: 180upx; padding: 0px 45upx; width: 100%; left: 0;box-sizing: border-box;}
	.Anti-counterfeiting .input-title{ color: #fff; font-size: 30upx;}
	
	.backimg {
		width: 100%;
		height: 100vh;
		position: relative;
		background-image: url('../../static/image/bg1.jpg');
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
		top: 0;
	}
	
	.bg{ height: 100vh; display: flex; overflow: hidden; width: 100vw;}
	.bgAll{ height: 100vh; overflow: hidden; width: 100vw;}


	.welcome {
		width: 50%;
		font-size: 46rpx;
		color: #FFFFFF;
		position: absolute;
		left: 45upx;
		top: 95rpx;
	}
	.welcome image{ height: 66upx; margin-bottom: 20upx;}


	.logobox {
		width: 142rpx;
		height: 72rpx;
		background-color: #E2EDFF;
		border-radius: 36rpx 0 0 36rpx;
		position: absolute;
		top: 224rpx;
		right: 0;
		display: flex;
		line-height: 72rpx;
		color: #1F70FF;
		font-size: 28rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			display: block;
			margin: 16rpx;
		}
	}

	.logoboxs {
		width: 142rpx;
		height: 72rpx;
		background-color: #E2EDFF;
		border-radius: 36rpx 0 0 36rpx;
		position: absolute;
		top: 152rpx;
		right: 0;
		display: flex;
		line-height: 72rpx;
		color: #1F70FF;
		font-size: 28rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			display: block;
			margin: 16rpx;
		}
	}

	.input-box {
		background-color: #FFFFFF;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 33upx;
		margin-bottom: 85upx;

		input {
			width: 70%;
			font-size: 22rpx;
			margin: 22rpx 32rpx;
		}

		.image-box {
			width: 15%;
			height: 48rpx;
			border-left: 2rpx solid #E4E4E4;
			margin: 20rpx 0;

			.scan {
				width: 48rpx;
				height: 48rpx;
				display: block;
				margin: auto;
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}

	.verification-box { background: #e60012; line-height: 80upx; border-radius: 10upx; text-align: center; color: #fff; font-size: 30upx;}
</style>
